<template>
<!-- 适用于账单整个生命周期。物流信息是在付款后才会存在 -->
<!-- 订单的页面 -->
<view class="main">
  <!-- 状态信息 -->
  <view class="status">
    <view class="section">
      <view class="content"><text>{{ state.order.statusString }}</text></view>
      <view class="countdown">
        <uni-countdown
            :show-day="false" :show-hour="false" :show-colon="false"
            :minute="12" :second="40"></uni-countdown>
      </view>
    </view>
  </view>
  <!-- 物流信息 -->
  <view class="express" v-if="showExpress">
    <view class="section">
      <uni-collapse>
        <uni-collapse-item title="物流信息" :open="false">
          <view class="list">
            <view class="item" v-for="(expressItem, expressIdx) in state.order.express.detail" :key="expressIdx">
              <view class="info">{{ expressItem.content }}</view>
              <view class="time">{{ expressItem.time }}</view>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
  <!-- 收件人信息 -->
  <AddressInfoComp :receiver="state.order.receiver" />
  <!-- 订单基本信息 -->
  <!-- 商品信息 -->
  <ProductInfoComp :products="state.order.products" />
  <!-- 账单信息 -->
  <BillInfoComp :bill="state.order.bill" />
  <view class="btn-grp">
    <view class="need-confirm" v-if="state.order.status === 'PRE_ORDER'">
      <view class="btn-item"><button size="mini">返回</button></view>
      <view class="btn-item">
        <button size="mini" style="color:#ffffff;backgroundColor:#f3a73f;borderColor:#f3a73f">取消订单</button>
      </view>
      <view class="btn-item">
        <button size="mini" type="warn">确认订单</button>
      </view>
    </view>
    <view class="need-pay" v-else-if="state.order.status === 'WAIT_PAY'">
      <view class="btn-item"><button size="mini">返回</button></view>
      <view class="btn-item"><button size="mini" style="color:#ffffff;backgroundColor:#f3a73f;borderColor:#f3a73f">取消订单</button></view>
      <view class="btn-item"><button size="mini" type="warn">去支付</button></view>
    </view>
    <view class="back" v-else>
      <view class="btn-item"><button size="mini">返回</button></view>
      <view class="btn-item">
        <button size="mini" style="color:#ffffff;backgroundColor:#f3a73f;borderColor:#f3a73f">取消订单</button>
      </view>
    </view>
  </view>
</view>
</template>
<script setup lang="ts">
import {computed, ref} from "vue";
import type {AddressItemType} from "@/types/user";
import AddressInfoComp from '@/pagesOrder/settings/components/AddressInfoComp.vue'
import ProductInfoComp from '@/pagesOrder/settings/components/ProductsInfoComp.vue'
import BillInfoComp from '@/pagesOrder/settings/components/BillInfoComp.vue'
import type {IOrderDetail} from "@/types/order";

const state = ref({
  orderStatusMap: [
    {label: "待确认", value: "PRE_ORDER"},
    {label: "待支付", value: "WAIT_PAY"},
    {label: "待发货", value: "WAIT_SEND"},
    {label: "运输中", value: "TRANSIT"},
    {label: "已完成", value: "DONE"},
    {label: "已取消", value: "CANCEL"},
  ],
  order: {
    id: 1,
    createTime: 1726645415,
    updateTime: 1726645415,
    number: "TG136696878",
    orderTime: 1726645532,
    receiver: {
      id: 1,
      uid: 1,
      addressee: "张三",
      phone: "169****3362",
      province: "浙江省",
      city: "杭州市",
      area: "余杭区",
      detail: "通天河9段"
    } as AddressItemType,
    status: "TRANSIT",
    statusString: "运输中",
    count: 2,
    products: [
      {
        id: 1, skuId: 1, name: "华硕天选X 2024 游戏台式机电脑主机设计师电脑",
        title: "华硕天选X 2024 游戏台式机电脑主机设计师电脑",
        summary: "华硕天选X 2024 游戏台式机电脑主机设计师电脑",
        spec: "14代i5-14400F 华硕RTX4060 8G显卡 16G DDR5 1T", price: 6199.00,
        thumbCover: "https://img11.360buyimg.com/n5/s54x54_jfs/t1/28636/39/22485/67227/66d809d1F8295ae5d/1685b210e59675a2.jpg",
        brand: {
          id: 1, name: "华硕", slogan: "坚如磐石", logo: ""
        },
        count: 1,
        status: "ON_LINE"
      }
    ],
    express: {
      number: "JD66987569863",
      channel: "JD",
      channelCn: "京东快递",
      detail: [
        {content: "派件中", time: "2024-09-18 16:00:00"},
        {content: "派件中", time: "2024-09-18 16:00:00"},
        {content: "派件中", time: "2024-09-18 16:00:00"},
        {content: "派件中", time: "2024-09-18 16:00:00"},
      ]
    },
    pay: {
      payChannel: "ZFB", // 支付渠道
      payChannelString: "支付宝", // 支付渠道中文名称
      payTime: 1726645415, // 支付时间
      payLastTime: 1726645415, // 支付过期时间, 15min
      status: "PAYED", // 支付状态
      statusString: "已支付" // 支付状态的中文
    },
    bill: {
      total: 6199.00,
      postFee: 6.00,
      actualPay: 6205.00
    }
  } as IOrderDetail
})

const showExpress = computed(() => {
  if (state.value.order.status === 'PRE_ORDER') return false
  if (state.value.order.status === 'WAIT_PAY') return false
  if (state.value.order.status === 'WAIT_SEND') return false
  return true
})
</script>
<style lang="scss">
.main {
  .status {
    height: 60px;
    background-color: #d1f2d7;
    display: flex;
    justify-content: center;
    align-items: center;
    .section {
      .content {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        color: $uni-color-error;
        margin-bottom: 10px;
      }
    }
  }
  .express {
    background-color: #fff;
    .section {
      .list {
        .item {
          display: block;
          .info {
            font-size: 15px;
            margin-bottom: 5px;
          }
          .time {
            font-size: 13px;
            color: $uni-text-color-grey;
          }
        }
      }
    }
  }



  .btn-grp {
    background-color: #fff;
    margin-top: 10px;
    padding: 10px 20px;
    .need-confirm,.need-pay, .back{
      display: flex;
      justify-content: end;
      .btn-item {
        margin-left: 10px;
      }
    }
  }
}
.section {
  margin: 10px 0;
  .list {
    .item {
      padding: 10px 20px;
      display: flex;
      justify-content: flex-start;
      .item-title {
        font-size: 12px;
        color: $uni-text-color-grey;
      }
      .item-content {
        margin-left: 10px;
        font-size: 13px;
      }
    }
  }
}
.item-title, .total-title {
  width: 20%;
}
</style>